<template>
  <div class="specialty">
    <div class="box" v-show="details.goods_name">
      <div class="title-name border-bottom">{{details.goods_name}}</div>
      <LargerVersion @show="closeShow" v-if="show" :idx="imageIndex" :arrImg="details.goods_img"></LargerVersion>
      <div class="imgList">
        <ul>
          <li v-for="(item,index) in details.goods_img">
            <img v-lazy="item.path" alt="" :class="_classArrange(details.goods_img.length)" @click="showLarger(index)">
          </li>
        </ul>
        <div class="cell-item border-bottom">
        <span class="left">
          {{details.goods_price}}
          <span style="color:#666" v-if="details.goods_type === '1'">（预订）</span>
        </span>
          <span class="right">已联系：{{details.goods_click}}</span>
        </div>
        <div class="cell-item">
          <span class="left"><i class="icon-user big"></i> <span class="big">{{details.contact_name}}</span></span>
          <span class="right"><span @click="_jumpList(details.sid)" class="big">更多土特产</span> <i
            class="icon-xiangyou"></i></span>
        </div>
      </div>
      <div class="info">
        <div class="input-box address border-bottom" @click="jumpBaiduMap(details.pro_lt,details.pro_addr)">
          <label>产品地址</label>
          <span>{{details.pro_addr}}</span>
          <i class="icon-dizhi"></i>
        </div>
        <div class="input-box address border-bottom" @click="jumpBaiduMap(details.add_lt,details.goods_add_place)">
          <label>发布地址</label>
          <span>{{details.goods_add_place}}</span>
          <i class="icon-dizhi"></i>
        </div>
        <div class="input-box border-bottom">
          <label>有效期</label>
          <span>{{details.goods_add_time}} 至 {{details.goods_expire_time}}</span>
        </div>
        <div class="input-box border-bottom">
          <label>发货方式</label>
          <span>{{details.goods_deliver_desc}}</span>
        </div>
        <div class="input-box">
          <label>商品类型</label>
          <span>{{details.goods_type_desc}}</span>
        </div>
      </div>
      <div class="describe">
        <div class="title border-bottom">商品详情</div>
        <div class="content" v-html="details.goods_desc"></div>
      </div>
      <div class="footer">
        <p class="border-top" @click="issue">
          <i class="icon-xiaolian"></i>
          <span>我也有土特产</span>
        </p>
        <p class="border-left border-top" @click="showLink(details.sid)">
          <i class="icon-dianhua"></i>
          <span>马上联系</span>
        </p>
      </div>
      <div class="link" v-show="link" @touchmove.prevent="" @click="link=false">
        <div class="box">
          <div class="phone ">
            <a :href="'tel:'+linkman.contact_phone">
              <span class="title">{{linkman.contact_name}}</span>
              <span class="content">{{linkman.contact_phone}}</span>
            </a>
            <span class="operation">
            <a :href="'tel:'+linkman.contact_phone" class="icon-dianhua"></a>
            <router-link tag="span" :to="'/complaint/'+details.id" class="complaint border-address">投诉</router-link>
          </span>
          </div>
          <div class="wechat border-top" v-if="linkman.contact_wechat !==''"
               @click="copyWechat($refs.contactWechat)">
            <span class="title">微信号</span>
            <input class="content" :value="linkman.contact_wechat" readonly ref="contactWechat">
            <span class="operation">复制</span>
          </div>
        </div>
      </div>
    </div>
    <!--loading加载-->
    <Loading v-show="loading"></Loading>
  </div>
</template>

<script>
  import {goodsDetails, goodsContacts} from 'common/js/specialty'
  import Loading from 'components/loading/Loading'
  import {isLogin} from 'common/js/user'
  import {mapGetters} from 'vuex'
  import LargerVersion from 'components/largerVersion/largerVersion'


  export default {
    data() {
      return {
        details: {},//详情内容
        linkman: {},//联系方式
        link: false, //是否显示联系人
        imageIndex: 1, //索引到查看大图位置
        show: false, //显示查看大图
      }
    },
    computed: {
      ...mapGetters([
        'loading'
      ]),
    },
    //防止被缓存
    mounted() {
      //商品详情
      this._goodsDetails();
    },
    methods: {
      //复制微信号
      copyWechat(item) {
        item.select();
        document.execCommand("copy");
        this.$dialog.toast({
          mes: '成功复制微信号',
          timeout: 1000,
        });
      },
      //跳转到百度地图
      jumpBaiduMap(item, site) {
        this.$router.push('/baiduMap/' + item.longitude + '/' + item.latitude + '/' + site)
      },
      //发布土特产
      issue() {
        isLogin().then(res => {
          if (res.status < 0) {
            this.$dialog.toast({
              mes: '登录后才能发布',
              timeout: 1000,
              callback: () => {
                this.$router.push('/login/auth');
              }
            });
          } else if (res.status === 1) {
            this.$router.push('/specialtyRelease');
          } else {
            this.$dialog.alert({
              mes: res.msg
            });
          }
        })
      },
      //查看大图
      showLarger(idx) {
        this.imageIndex = idx;
        this.show = true;
      },
      //关闭查看大图
      closeShow() {
        this.show = false;
      },
      //是否显示联系电话
      showLink(sid) {
        isLogin().then(res => {
          if (res.status < 0) {
            this.$dialog.toast({
              mes: '登录后查看联系方式',
              timeout: 1000,
              callback: () => {
                this.$router.push('/login/' + this.$route.params.id);
              }
            });
          } else if (res.status === 1) {
            goodsContacts({
              "goods_id": this.$route.params.id,//商品id
              "phpsid": localStorage.getItem('token'),//session_id
              "sid": sid,//当前商品的商家session_id
            }).then(res => {
              if (res.status === 1) {
                if (res.data != null) {
                  this.link = true;
                  this.linkman = res.data;
                } else {
                  this.$dialog.toast({
                    mes: '找不到该联系人',
                    timeout: 1000
                  });
                }
              }
            })
          }
        })
      },
      //跳转列表查看商家
      _jumpList(token) {
        this.$router.push('/specialtyList/' + token)
      },
      //商品详情内容
      _goodsDetails() {
        this.$store.dispatch('showLoading');
        goodsDetails({
          id: this.$route.params.id
        }).then(res => {
          this.$store.dispatch('hideLoading');
          if (res.status === 1) {
            this.details = res.data;
            document.title = this.details.goods_name;
          } else if (res.status === 0) {
            this.$dialog.alert({
              mes: res.msg, callback: () => {
                window.history.back()
              }
            });
          } else if (res.status < 0) {
            this.$dialog.alert({
              mes: res.expand.info, callback: () => {
                window.history.back()
              }
            });
          }
        }).catch(res => {
          this.$dialog.alert({
            mes: '接口请求失败，确认重新加载', callback: () => {
              window.location.reload()
            }
          });
        })
      },
      //自动选择图片排序
      _classArrange(data) {
        switch (data) {
          case 1:
            return 'imgClass1';
          case 2:
            return 'imgClass3';
          case 4:
            return 'imgClass3';
          default :
            return 'imgClass2'
        }
      }
    },
    components: {
      LargerVersion,
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .title-name
    background: $background-f;
    min-height: 1.3rem;
    padding: .5rem;
    font-size: .45rem;
    color: $color-title;
    line-height: .6rem;

  .imgList
    background: $background-f;
    padding: 0 .3rem;
    margin-bottom: .2rem;
    ul
      overflow: hidden;
      padding: .3rem 0;
      li
        float: left;
        padding: .12rem .12rem;

  .imgClass1
    display: block;
    width: 9.95rem;

  .imgClass2
    display: block;
    width: 3.16rem;
    height: 3.16rem;

  .imgClass3
    display: block;
    width: 4.847rem;
    height: 4.847rem;

  .cell-item
    position: relative;
    font-size: .4rem;
    min-height: 1.3rem;
    line-height: 1.3rem;
    .left
      font-size: .45rem;
      color: $color-a;
    .right
      position: absolute;
      top: 0;
      right: 0;
      font-size: .38rem;
      color: $color-address;
    .big
      font-size: .45rem;
      color: $color-text;

  .info
    padding: 0 .3rem;
    margin-bottom: .2rem;
    background: $background-f;
    .input-box
      position: relative;
      color: $color-text;
      font-size: .45rem;
      line-height: 1.25rem;
      padding-left: 2.6rem;
      word-wrap: nowrap;
      label
        position: absolute;
        top: 0;
        left: 0;
        line-height: 1.25rem;
      span
        margin-left: .2rem;
        color: $color-address;
      .icon-dizhi
        position: absolute;
        top: 0;
        right: 0;
        font-size: .6rem;
        width: 1rem;
        text-align: center;
        color: $color-address;
        line-height: 1.25rem;
    .address
      min-height: 1.25rem;
      padding: 0 1rem 0 2.6rem;
      line-height: .8rem;
      span
        margin-top: .2rem;
        display: inline-block;

  .describe
    margin-bottom: 1.5rem;
    padding: 0 .3rem .3rem .3rem;
    background: $background-f;
    .title
      color: $color-text;
      text-align: center;
      font-size: .46rem;
      line-height: 1.25rem;
    .content
      padding: .4rem 0;
      font-size: .38rem;
      color: $color-des;
      line-height: .55rem;

  .footer
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: $background-f;
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    text-align: center;
    color: $color-text;
    p
      width: 50%;
      font-size: .36rem;
      color: $color-text;
      height: 1.5rem;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      span
        width: 100%;
        font-size: .37rem;
        text-align: center;
    .share
      width: 33.33%;
      color: $color;
      font-size: .54rem;
      background: $background-btn;
      line-height: 1.5rem;
    i
      display: block;
      width: 100%;
      color: $color-a;
      font-size: .55rem;

  .link
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    background: $background-d;
    .box
      position: absolute;
      left: .5rem;
      right: .5rem;
      bottom: .4rem;
      background: $background-f;
      border-radius: .1rem;
      font-size: .45rem;
      color: $color-title;
    .box:before
      position: absolute;
      bottom: -.2rem;
      left: 45%;
      content: '';
      width: 0;
      height: 0;
      border-left: .5rem solid transparent;
      border-right: .5rem solid transparent;
      border-top: .3rem solid #fff;
    .phone, .wechat
      padding: 0 .5rem;
      line-height: 1.5rem;
      a
        font-size: .45rem;
      textarea
        border: none;
    .title
      width: 2.4rem;
      display: inline-block;

    .content
      width: 3.8rem;
      color: $color-text;
      display: inline-block;

    i, a
      font-size: .6rem;
    .complaint
      margin-left: .4rem;
      padding: .1rem;
      color: $color-des;
      border-radius: .1rem;
    .complaint:after
      content: ''
      position: absolute;
      top: 0;
      left: -.4rem;
      bottom: 0;
      width: 1px;
      background: $background-wire;


</style>
